<script setup lang="ts">
import { reactive } from 'vue'

import { ElLoading, ElMessage } from 'element-plus'

import api from '@/utils/api'

//加载到的用户数据
const userData = reactive({})
/**
 * 加载用户信息
 */
const loadUserInfo = () => {
  //显示加载动画
  const loading = ElLoading.service({
    lock: true,
    text: '正常处理',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  api
    .get('/api/get?id=1')
    .then((response: AxiosResponse<any>) => {
      if (response.status != 200 || !response.data || response.data.code != 200) {
        if (response.data) {
          ElMessage.error('加载失败:' + response.data.msg)
        } else {
          ElMessage.error('加载失败!')
        }
        return
      }
      let data = response.data.data
      Object.assign(userData, data)
    })
    .catch((error: AxiosError<any>) => {
      ElMessage.error('操作异常：' + error.message)
    })
    .finally(() => {
      loading.close()
    })
}
</script>
<template>
  <div style="padding: 20px">
    <el-result icon="success" title="登陆成功" sub-title="已登录，这是系统注册">
      <template #extra>
        <el-button type="primary" @click="loadUserInfo">获取用户</el-button>
      </template>
    </el-result>
    <div>用户信息：{{ userData }}</div>
  </div>
</template>
<style scoped></style>
